<template>
	<view class="content">
		<view class="bunner">
			<!-- 详情页头部轮播图组件 -->
			<IndexSwiper :content="imageList" activeBtn="#0bc9fd"  height="300rpx" swiperHight="355rpx">
			</IndexSwiper>
		</view>
		<view class="infomation">
			<view class="top">
				<image src="https://img2.baidu.com/it/u=2123856351,796291780&fm=253&fmt=auto&app=138&f=JPG?w=500&h=788"/>
			</view>
			<view class="top1" v-show="tipflag==0">
				感谢你为我助力，我在领取奖励的路上又近了一步，你呢？
			</view>
			<view class="top1" v-show="tipflag==1">
				我正在领取888元大礼包,快来为我助力一下吧！
			</view>
			<view class="top3">
				<button class='but' hover-class='none'>普通助力</button>
				<button class='but' hover-class='none'>申请设备助力</button>
			</view>
			
		</view>
		<view class="statistics"> 
		<view class="top">
			已有20个人为TA助力！
		</view>
		<view class="top1">
			<view class="item" v-for="(item,index) in 10" :key="index">
				<image src="https://img1.baidu.com/it/u=793269991,2224346596&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
			</view>
		</view>
			
		</view>


	</view>
</template>
<script>
	import IndexSwiper from '../../compnents/indexSwiper.vue'
	export default {
		components: {
			IndexSwiper
		},
		data() {
			return {
					imageList: [{url:'https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/1bc94cd354b9edc6bfaa3b9ccb07fd2.png'},
					{url:'https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/c659e97aefbe25892301eef0baabf5e.png'}
					],
					curent:0,
					tipflag:1

			}
		},
		computed: {

		},
		onLoad() {


		},
		methods: {
			switchTab(index){
				this.curent=index
			}





		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
		background: url(https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/backgrund.jpg);
		background-size: 100%;
	}
</style>
<style lang="scss" scoped>
	.content {
		text-align: center;
		align-items: center;
		padding-bottom: 140rpx;

		.bunner {
			height: 300rpx;
			margin: 20rpx 32rpx auto 32rpx;
			border-radius: 16rpx;
		}
		.statistics{
			min-height: 200rpx;
			margin: 30rpx 32rpx auto 32rpx;
			background-color:#fff;
			border-radius: 16rpx;
			padding-top: 30rpx;
			.top{
				padding-left: 10%;
				padding-right: 10%;
				height: 60rpx;
				text-align: center;
				justify-content: center;
				line-height: 60rpx;
				background-color: #FBFDFC;
				color: #D2D5D4;
				font-weight: bold;
			
				}
				.top1{
				min-height: 100rpx;
				
					margin-left: 10rpx;
					margin-right: 10rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					.item{
						height:100rpx ;
						width: 100rpx;
						text-align: center;
						border-radius: 50%;
						margin: 10rpx 15rpx 10rpx 10rpx;
						image{
							height:100rpx ;
							width: 100rpx;
							border-radius: 50%;
						}
					}
					
				}
				
			}
		.infomation{
			height: 400rpx;
			background-color: #FEFEFE;
			margin: 60rpx 32rpx auto 32rpx;
			border-radius: 16rpx;
			padding-top: 20rpx;
			.top{
				height: 120rpx;
				text-align: center;
				justify-content: center;
				line-height: 120rpx;
				image{
					height: 120rpx;
					width: 120rpx;
					border-radius: 50%;
				}
			}
			.top1{
				height: 140rpx;
				text-align: center;
				justify-content: center;
				font-size: 28rpx;
				color: #C9C9C9;
				padding-left: 20%;
				padding-right: 20%;
				flex-wrap: wrap;
				margin-top: 10rpx;
			}
			.top3{
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				// background-color: #3BBFFF;
				padding-left: 10%;
				padding-right: 10%;
				.but {
					background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/05.png');
					background-size: 100% 100%;
					width: 400rpx;
					height: 80rpx;
					font-size: 1em;
					color: white;
					background-color: rgba(255, 255, 255, 0);
				}
				
				.but:after {
					border: none;
				}
			
			}
			
		}





	}
</style>
